import { StyleSheet } from "react-native";
export const styles = StyleSheet.create({
  listContainer: {
    flex: 1,
  },
  itemContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 0.5,
  },
  avatar: {
    backgroundColor: "#E1E1E1",
    marginRight: 12,
  },
  infoContainer: {
    flex: 1,
    justifyContent: "center",
  },
  nameContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 2,
  },
  nameText: {
    fontSize: 16,
    fontWeight: "500",
    marginRight: 6,
  },
  roleTag: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
    marginLeft: 4,
  },
  roleText: {
    fontSize: 10,
    fontWeight: "500",
  },
  statusTag: {
    fontSize: 12,
    marginTop: 2,
  },
  checkbox: {
    padding: 0,
    margin: 0,
    backgroundColor: "transparent",
    borderWidth: 0,
  },
  removeButton: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 4,
    backgroundColor: "rgba(255, 59, 48, 0.1)",
  },
  removeText: {
    fontSize: 14,
    fontWeight: "500",
  },
  centerContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  messageText: {
    marginTop: 12,
    fontSize: 16,
  },
  originalName: {
    fontSize: 12,
  },
});
